<!--编辑后回显renderer-->
<template>
    <span v-if="params.action">
        <el-button
            v-for="(demo, index) in params.actionList"
            :key="index"
            :type="demo.type || 'primary'"
            plain
            :class="'wms-ag-cell-btn ' + (demo.btnClass || '')"
            :icon="demo.btnIcon"
            @click="demo.btnClick(params.data, params.rowIndex, params)">
                {{_cw(demo.btnText)}}
        </el-button>
    </span>
    <span v-else-if="params.data.tmsSummary">{{params.value}}</span>
    <el-switch
        v-else-if="params.switch"
        v-model="switchValue"
        :disabled="params.switchDisabled"
        active-value="1"
        inactive-value="0">
    </el-switch>
    <el-tooltip 
        v-else-if="tmsError" 
        effect="dark"
        placement="top-start"
        class="tms-form-item__error"
        :content="tmsErrorMessage">
            <span v-if="!this.isFieldEmpty(placeholder) && this.isFieldEmpty(params.value)" class="tms-table-span tms-table-span-place-holder tms-error">{{placeholder}}</span>
            <span v-else class="tms-table-span tms-table-span-place-holder tms-error">{{params.value}}</span>
    </el-tooltip>
    <span v-else-if="params.formatter && typeof params.formatter === 'function'" class="tms-table-span">
        {{formatterMethod()}}
    </span>
    <span v-else-if="!this.isFieldEmpty(placeholder) && this.isFieldEmpty(params.value)" class="tms-table-span tms-table-span-place-holder">{{placeholder}}</span>
    <span v-else-if="params.img">
      <el-image style="width: 100px; height: 100px" :src="params.img" fit="fill"></el-image>
    </span>
    <span v-else class="tms-table-span">{{params.value}}</span>
</template>
<script>
import Vue from 'vue'
import { Tooltip } from 'element-ui'
Vue.use(Tooltip)

export default Vue.extend({
    name: 'EditRenderer',
    data() {
        return {
        }
    },
    beforeMount() {
        let validateDeal = this.params.column.colDef.validateDeal
        if (_.isFunction(validateDeal)) {
            validateDeal(this.params, this.params.column.colDef)
        }
    },
    computed: {
        switchValue: {
            get() {
                return this.params.value;
            },
            set(value) {
            }
        },
        placeholder(){
            return this.params.data[this.params.column.colDef.field + 'Placeholder'];
        },
        tmsError() {
            let tmsValidObj = (this.params.data.tmsValid || []).filter(obj => obj.rowIndex === this.params.rowIndex && obj.colKey === this.params.column.colId)[0];
            if(!this.isResultEmpty(tmsValidObj)){
                return tmsValidObj.tmsError || false;
            }else{
                return false;
            }
        },
        tmsErrorMessage() {
            let tmsValidObj = (this.params.data.tmsValid || []).filter(obj => obj.rowIndex === this.params.rowIndex && obj.colKey === this.params.column.colId)[0];
            if(!this.isResultEmpty(tmsValidObj)){
                return tmsValidObj.tmsErrorMessage || '';
            }else{
                return '';
            }
        }
    },
    methods: {
        formatterMethod(){
            let row = this.params.data
            let column = this.params.column.colDef
            let cellValue = this.params.value
            return this.params.formatter.call(null, row, column, cellValue) || ''
        },
    },
    mounted(){
      console.log(this.params);
    }
})
</script>